

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05实时监控</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .!rounded-button {
            border-radius: 6px;
        }
        input[type="number"]::-webkit-outer-spin-button,
        input[type="number"]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        input[type="number"] {
            -moz-appearance: textfield;
        }
        .ant-select {
            position: relative;
            display: inline-block;
            width: 100%;
        }
        .ant-select-selector {
            position: relative;
            background-color: #fff;
            border: 1px solid #d9d9d9;
            border-radius: 6px;
            transition: all 0.3s;
            height: 32px;
            padding: 0 11px;
            display: flex;
            align-items: center;
        }
        .ant-select-selection-item {
            flex: 1;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .ant-select-arrow {
            position: absolute;
            top: 50%;
            right: 11px;
            transform: translateY(-50%);
            color: rgba(0, 0, 0, 0.25);
        }
        .ant-select-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background-color: #fff;
            border: 1px solid #d9d9d9;
            border-radius: 6px;
            box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12);
            z-index: 1050;
            max-height: 256px;
            overflow-y: auto;
            margin-top: 4px;
            display: none;
        }
        .ant-select-dropdown.show {
            display: block;
        }
        .ant-select-option {
            padding: 5px 12px;
            cursor: pointer;
        }
        .ant-select-option:hover {
            background-color: #f5f5f5;
        }
        .ant-select-option-selected {
            background-color: #e6f7ff;
            font-weight: 600;
        }
        .ant-badge {
            position: relative;
            display: inline-block;
            line-height: 1;
        }
        .ant-badge-status-dot {
            position: relative;
            top: -1px;
            display: inline-block;
            width: 6px;
            height: 6px;
            vertical-align: middle;
            border-radius: 50%;
        }
        .ant-badge-status-success {
            background-color: #52c41a;
        }
        .ant-badge-status-error {
            background-color: #ff4d4f;
        }
        .ant-badge-status-warning {
            background-color: #faad14;
        }
        .ant-badge-status-processing {
            background-color: #1890ff;
        }
        .ant-badge-status-default {
            background-color: #d9d9d9;
        }
        .ant-badge-count {
            position: absolute;
            top: 0;
            right: 0;
            transform: translate(50%, -50%);
            transform-origin: 100% 0%;
            color: #fff;
            font-size: 12px;
            height: 20px;
            line-height: 20px;
            border-radius: 10px;
            min-width: 20px;
            padding: 0 6px;
            text-align: center;
            background-color: #ff4d4f;
            border: 1px solid #fff;
            box-shadow: 0 0 0 1px #fff;
        }
        .ant-switch {
            position: relative;
            display: inline-block;
            box-sizing: border-box;
            width: 44px;
            height: 22px;
            line-height: 22px;
            vertical-align: middle;
            background-color: rgba(0, 0, 0, 0.25);
            border: 1px solid transparent;
            border-radius: 100px;
            cursor: pointer;
            transition: all 0.36s;
            user-select: none;
        }
        .ant-switch-checked {
            background-color: #1890ff;
        }
        .ant-switch-handle {
            position: absolute;
            top: 2px;
            left: 2px;
            width: 18px;
            height: 18px;
            background-color: #fff;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.36s;
        }
        .ant-switch-checked .ant-switch-handle {
            left: 22px;
        }
        .ant-slider {
            position: relative;
            height: 4px;
            margin: 14px 6px 10px;
            padding: 0;
            cursor: pointer;
            touch-action: none;
        }
        .ant-slider-rail {
            position: absolute;
            width: 100%;
            height: 4px;
            background-color: #f5f5f5;
            border-radius: 2px;
        }
        .ant-slider-track {
            position: absolute;
            height: 4px;
            background-color: #1890ff;
            border-radius: 2px;
        }
        .ant-slider-handle {
            position: absolute;
            width: 14px;
            height: 14px;
            margin-top: -5px;
            background-color: #fff;
            border: 2px solid #1890ff;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
        }
        .ant-slider-mark {
            position: absolute;
            top: 14px;
            left: 0;
            width: 100%;
            font-size: 12px;
        }
        .ant-slider-mark-text {
            position: absolute;
            display: inline-block;
            color: rgba(0, 0, 0, 0.45);
            text-align: center;
            word-break: keep-all;
            cursor: pointer;
            user-select: none;
        }
        .ant-alert {
            position: relative;
            padding: 8px 15px;
            word-wrap: break-word;
            border-radius: 6px;
        }
        .ant-alert-error {
            background-color: #fff2f0;
            border: 1px solid #ffccc7;
        }
        .ant-alert-message {
            margin-bottom: 0;
            color: rgba(0, 0, 0, 0.85);
            font-size: 14px;
        }
        .ant-card {
            position: relative;
            background-color: #fff;
            border-radius: 6px;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
        }
        .ant-card-head {
            min-height: 48px;
            padding: 0 24px;
            color: rgba(0, 0, 0, 0.85);
            font-weight: 500;
            font-size: 16px;
            background: transparent;
            border-bottom: 1px solid #f0f0f0;
            border-radius: 6px 6px 0 0;
        }
        .ant-card-head-title {
            display: inline-block;
            flex: 1;
            padding: 12px 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .ant-card-body {
            padding: 24px;
        }
        .ant-card-small > .ant-card-head {
            min-height: 36px;
            padding: 0 12px;
            font-size: 14px;
        }
        .ant-card-small > .ant-card-head-title {
            padding: 8px 0;
        }
        .ant-card-small > .ant-card-body {
            padding: 12px;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- 顶部标题栏 -->
    <header style="background: linear-gradient(135deg, #3B82F6 0%, #1E40AF 100%);" class="text-white py-2.5 px-6 shadow-xl">
        <div class="flex justify-between items-center">
            <div class="flex-1"></div>
            <h1 class="text-3xl font-bold flex-1 text-center tracking-wide">马鞍山非急救转运调度中心</h1>
            <div class="flex-1 flex justify-end items-center space-x-4">
                <div style="background: rgba(255, 255, 255, 0.2);" class="flex items-center space-x-3 px-4 py-2 rounded-full backdrop-blur-sm">
                    <i class="fas fa-user-circle text-xl"></i>
                    <span class="font-medium">调度员 张晓丽</span>
                </div>
                <button style="transition: all 0.3s ease;" class="text-white hover:bg-white/20 p-3 rounded-full transition-all duration-300 hover:rotate-90">
                    <i class="fas fa-cog text-xl"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- 导航栏 -->
    <nav style="background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2);" class="shadow-lg sticky top-0 z-50">
        <div class="flex justify-center">
            <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
                <i class="fas fa-th-large text-lg" style="transition: all 0.3s ease;"></i>
                <span>调度中心</span>
            </a>
            <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
                <i class="fas fa-clipboard-list text-lg" style="transition: all 0.3s ease;"></i>
                <span>订单管理</span>
            </a>
            <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
                <i class="fas fa-users text-lg" style="transition: all 0.3s ease;"></i>
                <span>人员管理</span>
            </a>
            <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
                <i class="fas fa-ambulance text-lg" style="transition: all 0.3s ease;"></i>
                <span>车辆管理</span>
            </a>
            <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
                <i class="fas fa-truck text-lg" style="transition: all 0.3s ease;"></i>
                <span>车辆状态</span>
            </a>
            <a href="#" class="nav-item active px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; color: #3B82F6; font-weight: 600;">
                <i class="fas fa-map-marked-alt text-lg" style="transition: all 0.3s ease;"></i>
                <span>实时监控</span>
                <span style="content: ''; position: absolute; bottom: 0; left: 50%; width: 80%; height: 3px; background: linear-gradient(90deg, #3B82F6, #1E40AF); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: translateX(-50%);"></span>
            </a>
            <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
                <i class="fas fa-coins text-lg" style="transition: all 0.3s ease;"></i>
                <span>财务管理</span>
            </a>
        </div>
    </nav>
    
   
    <!-- 主体内容区域 -->
    <div class="w-full p-6">
        <div class="grid grid-cols-4 gap-6" style="height: calc(100vh - 280px);">
            <!-- 监控画面区域 -->
            <div class="col-span-3 flex flex-col" style="height: 100%;">
                <!-- 控制工具栏 -->
                <div class="bg-white p-4 rounded-lg shadow-sm mb-4">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-4">
                            <div class="flex items-center space-x-2">
                                <span class="text-sm text-gray-600">车辆筛选:</span>
                                <div class="ant-select w-40">
                                    <div class="ant-select-selector" id="vehicleSelect">
                                        <span class="ant-select-selection-item">皖E555322</span>
                                        <span class="ant-select-arrow">
                                            <i class="fas fa-chevron-down"></i>
                                        </span>
                                    </div>
                                    <div class="ant-select-dropdown" id="vehicleDropdown">
                                        <div class="ant-select-option" data-value="all">全部车辆</div>
                                        <div class="ant-select-option ant-select-option-selected" data-value="皖E555322">皖E555322</div>
                                        <div class="ant-select-option" data-value="皖E555323">皖E555323</div>
                                        <div class="ant-select-option" data-value="皖E555324">皖E555324</div>
                                        <div class="ant-select-option" data-value="皖E555325">皖E555325</div>
                                        <div class="ant-select-option" data-value="皖E555326">皖E555326</div>
                                        <div class="ant-select-option" data-value="皖E555327">皖E555327</div>
                                        <div class="ant-select-option" data-value="皖E555328">皖E555328</div>
                                        <div class="ant-select-option" data-value="皖E555329">皖E555329</div>
                                        <div class="ant-select-option" data-value="皖E555330">皖E555330</div>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-center space-x-2">
                                <span class="text-sm text-gray-600">画面布局:</span>
                                <div class="ant-select w-32">
                                    <div class="ant-select-selector" id="layoutSelect">
                                        <span class="ant-select-selection-item">2x2</span>
                                        <span class="ant-select-arrow">
                                            <i class="fas fa-chevron-down"></i>
                                        </span>
                                    </div>
                                    <div class="ant-select-dropdown" id="layoutDropdown">
                                        <div class="ant-select-option" data-value="1x1">单画面</div>
                                        <div class="ant-select-option ant-select-option-selected" data-value="2x2">四画面</div>
                                        <div class="ant-select-option" data-value="3x3">九画面</div>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-center space-x-2">
                                <span class="text-sm text-gray-600">摄像头视图:</span>
                                <div class="ant-select w-32">
                                    <div class="ant-select-selector" id="cameraViewSelect">
                                        <span class="ant-select-selection-item">内部</span>
                                        <span class="ant-select-arrow">
                                            <i class="fas fa-chevron-down"></i>
                                        </span>
                                    </div>
                                    <div class="ant-select-dropdown" id="cameraViewDropdown">
                                        <div class="ant-select-option" data-value="top">顶部</div>
                                        <div class="ant-select-option" data-value="front">前方</div>
                                        <div class="ant-select-option" data-value="left">左侧</div>
                                        <div class="ant-select-option" data-value="right">右侧</div>
                                        <div class="ant-select-option" data-value="back">后方</div>
                                        <div class="ant-select-option ant-select-option-selected" data-value="interior">内部</div>
                                    </div>
                                </div>
                            </div>
                            <div class="h-6 w-px bg-gray-300"></div>
                            <div class="flex items-center space-x-2">
                                <button class="!rounded-button whitespace-nowrap cursor-pointer bg-white border border-gray-300 text-gray-700 py-1 px-3 rounded text-sm hover:bg-gray-50 flex items-center">
                                    <i class="fas fa-search mr-2"></i>
                                    搜索
                                </button>
                                <button class="!rounded-button whitespace-nowrap cursor-pointer bg-white border border-gray-300 text-gray-700 py-1 px-3 rounded text-sm hover:bg-gray-50 flex items-center">
                                    <i class="fas fa-sync-alt mr-2"></i>
                                    刷新
                                </button>
                            </div>
                        </div>
                        <div class="flex items-center space-x-4">
                            <div class="flex items-center space-x-2">
                                <span class="text-sm text-gray-600">录制:</span>
                                <div class="ant-switch" id="recordingSwitch">
                                    <div class="ant-switch-handle"></div>
                                </div>
                            </div>
                            <div class="flex items-center space-x-2">
                                <span class="text-sm text-gray-600">音频:</span>
                                <div class="ant-switch ant-switch-checked" id="audioSwitch">
                                    <div class="ant-switch-handle"></div>
                                </div>
                            </div>
                            <button class="!rounded-button whitespace-nowrap cursor-pointer bg-white border border-gray-300 text-gray-700 py-1 px-3 rounded text-sm hover:bg-gray-50 flex items-center">
                                <i class="fas fa-download mr-2"></i>
                                导出录像
                            </button>
                        </div>
                    </div>
                </div>
                <!-- 监控画面网格 -->
                <div class="bg-white p-4 rounded-lg shadow-sm flex-1 h-0">
                    <div id="monitorGrid" class="grid grid-cols-2 gap-4 h-full">
                        <!-- 监控画面将通过JavaScript动态生成 -->
                    </div>
                </div>
            </div>
            <!-- 右侧信息面板 -->
            <div class="space-y-4 overflow-y-auto h-full pb-4">
                <!-- 摄像头视图控制 -->
                <div class="ant-card ant-card-small shadow-sm">
                    <div class="ant-card-head">
                        <div class="ant-card-head-title">
                            <div class="flex items-center space-x-2">
                                <i class="fas fa-video text-blue-600"></i>
                                <span>摄像头视图</span>
                            </div>
                        </div>
                    </div>
                    <div class="ant-card-body">
                        <div class="grid grid-cols-3 gap-2">
                            <button class="camera-view-btn !rounded-button cursor-pointer flex flex-col items-center justify-center h-12 text-xs whitespace-nowrap bg-white border border-gray-300 text-gray-700 py-1 px-2 rounded hover:bg-gray-50" data-view="top">
                                <i class="fas fa-arrow-up mb-1"></i>
                                <div>顶部</div>
                            </button>
                            <button class="camera-view-btn !rounded-button cursor-pointer flex flex-col items-center justify-center h-12 text-xs whitespace-nowrap bg-white border border-gray-300 text-gray-700 py-1 px-2 rounded hover:bg-gray-50" data-view="front">
                                <i class="fas fa-arrow-up mb-1"></i>
                                <div>前方</div>
                            </button>
                            <button class="camera-view-btn !rounded-button cursor-pointer flex flex-col items-center justify-center h-12 text-xs whitespace-nowrap bg-white border border-gray-300 text-gray-700 py-1 px-2 rounded hover:bg-gray-50" data-view="left">
                                <i class="fas fa-arrow-left mb-1"></i>
                                <div>左侧</div>
                            </button>
                            <button class="camera-view-btn !rounded-button cursor-pointer flex flex-col items-center justify-center h-12 text-xs whitespace-nowrap bg-white border border-gray-300 text-gray-700 py-1 px-2 rounded hover:bg-gray-50" data-view="right">
                                <i class="fas fa-arrow-right mb-1"></i>
                                <div>右侧</div>
                            </button>
                            <button class="camera-view-btn !rounded-button cursor-pointer flex flex-col items-center justify-center h-12 text-xs whitespace-nowrap bg-white border border-gray-300 text-gray-700 py-1 px-2 rounded hover:bg-gray-50" data-view="back">
                                <i class="fas fa-arrow-down mb-1"></i>
                                <div>后方</div>
                            </button>
                            <button class="camera-view-btn !rounded-button cursor-pointer flex flex-col items-center justify-center h-12 text-xs whitespace-nowrap bg-blue-600 text-white py-1 px-2 rounded hover:bg-blue-700" data-view="interior">
                                <i class="fas fa-user mb-1"></i>
                                <div>内部</div>
                            </button>
                        </div>
                    </div>
                </div>
                <!-- 车辆状态信息 -->
                <div class="ant-card ant-card-small shadow-sm">
                    <div class="ant-card-head">
                        <div class="ant-card-head-title">
                            <div class="flex items-center space-x-2">
                                <i class="fas fa-car text-blue-600"></i>
                                <span>车辆状态</span>
                            </div>
                        </div>
                    </div>
                    <div class="ant-card-body">
                        <div id="vehicleStatusList" class="space-y-3">
                            <!-- 车辆状态信息将通过JavaScript动态生成 -->
                        </div>
                    </div>
                </div>
                <!-- 监控控制面板 -->
                <div class="ant-card ant-card-small shadow-sm">
                    <div class="ant-card-head">
                        <div class="ant-card-head-title">监控控制</div>
                    </div>
                    <div class="ant-card-body">
                        <div class="space-y-4">
                            <div>
                                <div class="flex items-center justify-between mb-2">
                                    <span class="text-sm text-gray-600">画面质量</span>
                                    <span class="text-sm font-medium" id="qualityValue">720p</span>
                                </div>
                                <div class="ant-slider">
                                    <div class="ant-slider-rail"></div>
                                    <div class="ant-slider-track" id="qualityTrack" style="width: 50%; left: 0%;"></div>
                                    <div class="ant-slider-handle" id="qualityHandle" style="left: 50%;"></div>
                                    <div class="ant-slider-mark">
                                        <span class="ant-slider-mark-text" style="left: 0%;">480p</span>
                                        <span class="ant-slider-mark-text" style="left: 50%;">720p</span>
                                        <span class="ant-slider-mark-text" style="left: 100%;">1080p</span>
                                    </div>
                                </div>
                            </div>
                            <div class="grid grid-cols-2 gap-2">
                                <button class="!rounded-button whitespace-nowrap cursor-pointer bg-white border border-gray-300 text-gray-700 py-2 px-3 rounded text-sm hover:bg-gray-50 flex items-center justify-center">
                                    <i class="fas fa-play mr-2"></i>
                                    播放
                                </button>
                                <button class="!rounded-button whitespace-nowrap cursor-pointer bg-white border border-gray-300 text-gray-700 py-2 px-3 rounded text-sm hover:bg-gray-50 flex items-center justify-center">
                                    <i class="fas fa-pause mr-2"></i>
                                    暂停
                                </button>
                            </div>
                            <button class="!rounded-button whitespace-nowrap cursor-pointer bg-white border border-gray-300 text-gray-700 py-2 px-3 rounded text-sm hover:bg-gray-50 flex items-center justify-center w-full">
                                <i class="fas fa-eye mr-2"></i>
                                录像回放
                            </button>
                        </div>
                    </div>
                </div>
                <!-- 报警提醒面板 -->
                <div class="ant-card ant-card-small shadow-sm">
                    <div class="ant-card-head">
                        <div class="ant-card-head-title">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-2">
                                    <i class="fas fa-exclamation-triangle text-red-600"></i>
                                    <span>报警提醒</span>
                                </div>
                                <div class="ant-badge">
                                    <span class="ant-badge-count">3</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="ant-card-body">
                        <div id="alarmList" class="space-y-2">
                            <!-- 报警信息将通过JavaScript动态生成 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部状态栏 -->
    <div class="w-full px-6 py-3 bg-white border-t border-gray-200">
        <div class="flex items-center justify-between text-sm text-gray-600">
            <div class="flex items-center space-x-6">
                <div class="flex items-center space-x-2">
                    <span class="ant-badge-status-dot ant-badge-status-success"></span>
                    <span>在线车辆: <span id="onlineCount">9</span> 辆</span>
                </div>
                <div class="flex items-center space-x-2">
                    <span class="ant-badge-status-dot ant-badge-status-error"></span>
                    <span>离线车辆: <span id="offlineCount">1</span> 辆</span>
                </div>
                <div class="flex items-center space-x-2">
                    <div class="w-2 h-2 bg-green-500 rounded-full"></div>
                    <span>系统连接正常</span>
                </div>
            </div>
            <div class="flex items-center space-x-4">
                <span>网络质量: 良好</span>
                <span>最后更新: <span id="lastUpdate">14:30:25</span></span>
            </div>
        </div>
    </div>
    <script>
        // 模拟车辆数据
        const vehicleData = [
            {
                plateNumber: '皖E555322',
                driver: '张师傅',
                driverPhoto: 'https://readdy.ai/api/search-image?query=professional%20ambulance%20driver%20portrait%20wearing%20uniform%20with%20friendly%20smile%20clean%20background%20medical%20vehicle%20operator&width=60&height=60&seq=driver001&orientation=squarish',
                location: '马鞍山市人民医院',
                status: 'online',
                speed: '35 km/h',
                fuel: '85%',
                lastActivity: '2分钟前',
                currentTask: '执行中',
                cameras: {
                    top: 'https://readdy.ai/api/search-image?query=ambulance%20vehicle%20top%20view%20aerial%20perspective%20from%20above%20white%20medical%20emergency%20vehicle%20on%20road%20professional%20monitoring%20camera%20angle&width=400&height=225&seq=top001&orientation=landscape',
                    front: 'https://readdy.ai/api/search-image?query=ambulance%20front%20view%20dashboard%20windshield%20perspective%20medical%20vehicle%20interior%20with%20driver%20professional%20emergency%20transport%20monitoring&width=400&height=225&seq=front001&orientation=landscape',
                    left: 'https://readdy.ai/api/search-image?query=ambulance%20left%20side%20view%20exterior%20road%20perspective%20medical%20emergency%20vehicle%20driving%20monitoring%20camera%20angle%20professional&width=400&height=225&seq=left001&orientation=landscape',
                    right: 'https://readdy.ai/api/search-image?query=ambulance%20right%20side%20view%20exterior%20road%20perspective%20medical%20emergency%20vehicle%20monitoring%20camera%20professional%20transport&width=400&height=225&seq=right001&orientation=landscape',
                    back: 'https://readdy.ai/api/search-image?query=ambulance%20rear%20view%20back%20camera%20perspective%20medical%20vehicle%20monitoring%20professional%20emergency%20transport%20back%20angle&width=400&height=225&seq=back001&orientation=landscape',
                    interior: 'https://readdy.ai/api/search-image?query=ambulance%20interior%20cabin%20medical%20equipment%20dashboard%20professional%20emergency%20vehicle%20interior%20monitoring%20camera%20perspective&width=400&height=225&seq=interior001&orientation=landscape'
                }
            },
            {
                plateNumber: '皖E555323',
                driver: '李师傅',
                driverPhoto: 'https://readdy.ai/api/search-image?query=experienced%20ambulance%20driver%20portrait%20wearing%20medical%20uniform%20professional%20appearance%20clean%20background%20emergency%20vehicle%20operator&width=60&height=60&seq=driver002&orientation=squarish',
                location: '马鞍山市中心医院',
                status: 'online',
                speed: '0 km/h',
                fuel: '92%',
                lastActivity: '1分钟前',
                currentTask: '空闲',
                cameras: {
                    top: 'https://readdy.ai/api/search-image?query=ambulance%20vehicle%20top%20view%20aerial%20perspective%20from%20above%20white%20medical%20emergency%20vehicle%20parked%20professional%20monitoring%20camera%20angle&width=400&height=225&seq=top002&orientation=landscape',
                    front: 'https://readdy.ai/api/search-image?query=ambulance%20front%20view%20dashboard%20windshield%20perspective%20medical%20vehicle%20interior%20parked%20professional%20emergency%20transport%20monitoring&width=400&height=225&seq=front002&orientation=landscape',
                    left: 'https://readdy.ai/api/search-image?query=ambulance%20left%20side%20view%20exterior%20parked%20perspective%20medical%20emergency%20vehicle%20monitoring%20camera%20angle%20professional&width=400&height=225&seq=left002&orientation=landscape',
                    right: 'https://readdy.ai/api/search-image?query=ambulance%20right%20side%20view%20exterior%20parked%20perspective%20medical%20emergency%20vehicle%20monitoring%20camera%20professional%20transport&width=400&height=225&seq=right002&orientation=landscape',
                    back: 'https://readdy.ai/api/search-image?query=ambulance%20rear%20view%20back%20camera%20perspective%20medical%20vehicle%20parked%20monitoring%20professional%20emergency%20transport%20back%20angle&width=400&height=225&seq=back002&orientation=landscape',
                    interior: 'https://readdy.ai/api/search-image?query=ambulance%20interior%20cabin%20medical%20equipment%20dashboard%20professional%20emergency%20vehicle%20interior%20monitoring%20camera%20perspective%20empty&width=400&height=225&seq=interior002&orientation=landscape'
                }
            },
            {
                plateNumber: '皖E555324',
                driver: '王师傅',
                driverPhoto: 'https://readdy.ai/api/search-image?query=senior%20ambulance%20driver%20portrait%20wearing%20medical%20service%20uniform%20confident%20expression%20clean%20background%20healthcare%20transport%20operator&width=60&height=60&seq=driver003&orientation=squarish',
                location: '马鞍山市第二医院',
                status: 'online',
                speed: '42 km/h',
                fuel: '78%',
                lastActivity: '刚刚',
                currentTask: '执行中',
                cameras: {
                    top: 'https://readdy.ai/api/search-image?query=ambulance%20vehicle%20top%20view%20aerial%20perspective%20from%20above%20white%20medical%20emergency%20vehicle%20moving%20professional%20monitoring%20camera%20angle&width=400&height=225&seq=top003&orientation=landscape',
                    front: 'https://readdy.ai/api/search-image?query=ambulance%20front%20view%20dashboard%20windshield%20perspective%20medical%20vehicle%20interior%20driving%20professional%20emergency%20transport%20monitoring&width=400&height=225&seq=front003&orientation=landscape',
                    left: 'https://readdy.ai/api/search-image?query=ambulance%20left%20side%20view%20exterior%20driving%20perspective%20medical%20emergency%20vehicle%20monitoring%20camera%20angle%20professional%20moving&width=400&height=225&seq=left003&orientation=landscape',
                    right: 'https://readdy.ai/api/search-image?query=ambulance%20right%20side%20view%20exterior%20driving%20perspective%20medical%20emergency%20vehicle%20monitoring%20camera%20professional%20transport%20moving&width=400&height=225&seq=right003&orientation=landscape',
                    back: 'https://readdy.ai/api/search-image?query=ambulance%20rear%20view%20back%20camera%20perspective%20medical%20vehicle%20driving%20monitoring%20professional%20emergency%20transport%20back%20angle%20moving&width=400&height=225&seq=back003&orientation=landscape',
                    interior: 'https://readdy.ai/api/search-image?query=ambulance%20interior%20cabin%20medical%20equipment%20dashboard%20professional%20emergency%20vehicle%20interior%20monitoring%20camera%20perspective%20active&width=400&height=225&seq=interior003&orientation=landscape'
                }
            },
            {
                plateNumber: '皖E555325',
                driver: '赵师傅',
                driverPhoto: 'https://readdy.ai/api/search-image?query=professional%20ambulance%20driver%20portrait%20wearing%20medical%20uniform%20friendly%20demeanor%20clean%20background%20emergency%20medical%20transport%20operator&width=60&height=60&seq=driver004&orientation=squarish',
                location: '离线',
                status: 'offline',
                speed: '0 km/h',
                fuel: '45%',
                lastActivity: '30分钟前',
                currentTask: '离线',
                cameras: {
                    top: 'https://readdy.ai/api/search-image?query=ambulance%20vehicle%20top%20view%20aerial%20perspective%20from%20above%20white%20medical%20emergency%20vehicle%20offline%20professional%20monitoring%20camera%20angle%20static&width=400&height=225&seq=top004&orientation=landscape',
                    front: 'https://readdy.ai/api/search-image?query=ambulance%20front%20view%20dashboard%20windshield%20perspective%20medical%20vehicle%20interior%20offline%20professional%20emergency%20transport%20monitoring%20dark&width=400&height=225&seq=front004&orientation=landscape',
                    left: 'https://readdy.ai/api/search-image?query=ambulance%20left%20side%20view%20exterior%20offline%20perspective%20medical%20emergency%20vehicle%20monitoring%20camera%20angle%20professional%20static&width=400&height=225&seq=left004&orientation=landscape',
                    right: 'https://readdy.ai/api/search-image?query=ambulance%20right%20side%20view%20exterior%20offline%20perspective%20medical%20emergency%20vehicle%20monitoring%20camera%20professional%20transport%20static&width=400&height=225&seq=right004&orientation=landscape',
                    back: 'https://readdy.ai/api/search-image?query=ambulance%20rear%20view%20back%20camera%20perspective%20medical%20vehicle%20offline%20monitoring%20professional%20emergency%20transport%20back%20angle%20static&width=400&height=225&seq=back004&orientation=landscape',
                    interior: 'https://readdy.ai/api/search-image?query=ambulance%20interior%20cabin%20medical%20equipment%20dashboard%20professional%20emergency%20vehicle%20interior%20monitoring%20camera%20perspective%20offline%20dark&width=400&height=225&seq=interior004&orientation=landscape'
                }
            },
            {
                plateNumber: '皖E555326',
                driver: '陈师傅',
                driverPhoto: 'https://readdy.ai/api/search-image?query=young%20ambulance%20driver%20portrait%20wearing%20medical%20uniform%20professional%20smile%20clean%20background%20emergency%20medical%20transport%20operator&width=60&height=60&seq=driver005&orientation=squarish',
                location: '马鞍山市第三医院',
                status: 'online',
                speed: '28 km/h',
                fuel: '67%',
                lastActivity: '3分钟前',
                currentTask: '执行中',
                cameras: {
                    top: 'https://readdy.ai/api/search-image?query=ambulance%20vehicle%20top%20view%20aerial%20perspective%20from%20above%20white%20medical%20emergency%20vehicle%20on%20highway%20professional%20monitoring%20camera%20angle&width=400&height=225&seq=top005&orientation=landscape',
                    front: 'https://readdy.ai/api/search-image?query=ambulance%20front%20view%20dashboard%20windshield%20perspective%20medical%20vehicle%20interior%20highway%20driving%20professional%20emergency%20transport%20monitoring&width=400&height=225&seq=front005&orientation=landscape',
                    left: 'https://readdy.ai/api/search-image?query=ambulance%20left%20side%20view%20exterior%20highway%20perspective%20medical%20emergency%20vehicle%20monitoring%20camera%20angle%20professional%20urban&width=400&height=225&seq=left005&orientation=landscape',
                    right: 'https://readdy.ai/api/search-image?query=ambulance%20right%20side%20view%20exterior%20highway%20perspective%20medical%20emergency%20vehicle%20monitoring%20camera%20professional%20transport%20urban&width=400&height=225&seq=right005&orientation=landscape',
                    back: 'https://readdy.ai/api/search-image?query=ambulance%20rear%20view%20back%20camera%20perspective%20medical%20vehicle%20highway%20monitoring%20professional%20emergency%20transport%20back%20angle%20urban&width=400&height=225&seq=back005&orientation=landscape',
                    interior: 'https://readdy.ai/api/search-image?query=ambulance%20interior%20cabin%20medical%20equipment%20dashboard%20professional%20emergency%20vehicle%20interior%20monitoring%20camera%20perspective%20highway&width=400&height=225&seq=interior005&orientation=landscape'
                }
            },
            {
                plateNumber: '皖E555327',
                driver: '刘师傅',
                driverPhoto: 'https://readdy.ai/api/search-image?query=experienced%20ambulance%20driver%20portrait%20wearing%20medical%20uniform%20serious%20expression%20clean%20background%20emergency%20medical%20transport%20operator&width=60&height=60&seq=driver006&orientation=squarish',
                location: '马鞍山市急救中心',
                status: 'online',
                speed: '15 km/h',
                fuel: '91%',
                lastActivity: '1分钟前',
                currentTask: '空闲',
                cameras: {
                    top: 'https://readdy.ai/api/search-image?query=ambulance%20vehicle%20top%20view%20aerial%20perspective%20from%20above%20white%20medical%20emergency%20vehicle%20in%20hospital%20area%20professional%20monitoring%20camera%20angle&width=400&height=225&seq=top006&orientation=landscape',
                    front: 'https://readdy.ai/api/search-image?query=ambulance%20front%20view%20dashboard%20windshield%20perspective%20medical%20vehicle%20interior%20hospital%20area%20professional%20emergency%20transport%20monitoring&width=400&height=225&seq=front006&orientation=landscape',
                    left: 'https://readdy.ai/api/search-image?query=ambulance%20left%20side%20view%20exterior%20hospital%20perspective%20medical%20emergency%20vehicle%20monitoring%20camera%20angle%20professional%20medical&width=400&height=225&seq=left006&orientation=landscape',
                    right: 'https://readdy.ai/api/search-image?query=ambulance%20right%20side%20view%20exterior%20hospital%20perspective%20medical%20emergency%20vehicle%20monitoring%20camera%20professional%20transport%20medical&width=400&height=225&seq=right006&orientation=landscape',
                    back: 'https://readdy.ai/api/search-image?query=ambulance%20rear%20view%20back%20camera%20perspective%20medical%20vehicle%20hospital%20monitoring%20professional%20emergency%20transport%20back%20angle%20medical&width=400&height=225&seq=back006&orientation=landscape',
                    interior: 'https://readdy.ai/api/search-image?query=ambulance%20interior%20cabin%20medical%20equipment%20dashboard%20professional%20emergency%20vehicle%20interior%20monitoring%20camera%20perspective%20hospital&width=400&height=225&seq=interior006&orientation=landscape'
                }
            },
            {
                plateNumber: '皖E555328',
                driver: '吴师傅',
                driverPhoto: 'https://readdy.ai/api/search-image?query=middle%20aged%20ambulance%20driver%20portrait%20wearing%20medical%20uniform%20focused%20expression%20clean%20background%20emergency%20medical%20transport%20operator&width=60&height=60&seq=driver007&orientation=squarish',
                location: '马鞍山市康复医院',
                status: 'online',
                speed: '0 km/h',
                fuel: '53%',
                lastActivity: '5分钟前',
                currentTask: '空闲',
                cameras: {
                    top: 'https://readdy.ai/api/search-image?query=ambulance%20vehicle%20top%20view%20aerial%20perspective%20from%20above%20white%20medical%20emergency%20vehicle%20parked%20at%20clinic%20professional%20monitoring%20camera%20angle&width=400&height=225&seq=top007&orientation=landscape',
                    front: 'https://readdy.ai/api/search-image?query=ambulance%20front%20view%20dashboard%20windshield%20perspective%20medical%20vehicle%20interior%20parked%20clinic%20professional%20emergency%20transport%20monitoring&width=400&height=225&seq=front007&orientation=landscape',
                    left: 'https://readdy.ai/api/search-image?query=ambulance%20left%20side%20view%20exterior%20clinic%20perspective%20medical%20emergency%20vehicle%20monitoring%20camera%20angle%20professional%20healthcare&width=400&height=225&seq=left007&orientation=landscape',
                    right: 'https://readdy.ai/api/search-image?query=ambulance%20right%20side%20view%20exterior%20clinic%20perspective%20medical%20emergency%20vehicle%20monitoring%20camera%20professional%20transport%20healthcare&width=400&height=225&seq=right007&orientation=landscape',
                    back: 'https://readdy.ai/api/search-image?query=ambulance%20rear%20view%20back%20camera%20perspective%20medical%20vehicle%20clinic%20monitoring%20professional%20emergency%20transport%20back%20angle%20healthcare&width=400&height=225&seq=back007&orientation=landscape',
                    interior: 'https://readdy.ai/api/search-image?query=ambulance%20interior%20cabin%20medical%20equipment%20dashboard%20professional%20emergency%20vehicle%20interior%20monitoring%20camera%20perspective%20clinic&width=400&height=225&seq=interior007&orientation=landscape'
                }
            },
            {
                plateNumber: '皖E555329',
                driver: '周师傅',
                driverPhoto: 'https://readdy.ai/api/search-image?query=experienced%20ambulance%20driver%20portrait%20wearing%20medical%20uniform%20calm%20expression%20clean%20background%20emergency%20medical%20transport%20operator&width=60&height=60&seq=driver008&orientation=squarish',
                location: '马鞍山市第四医院',
                status: 'online',
                speed: '52 km/h',
                fuel: '73%',
                lastActivity: '刚刚',
                currentTask: '执行中',
                cameras: {
                    top: 'https://readdy.ai/api/search-image?query=ambulance%20vehicle%20top%20view%20aerial%20perspective%20from%20above%20white%20medical%20emergency%20vehicle%20on%20main%20road%20professional%20monitoring%20camera%20angle&width=400&height=225&seq=top008&orientation=landscape',
                    front: 'https://readdy.ai/api/search-image?query=ambulance%20front%20view%20dashboard%20windshield%20perspective%20medical%20vehicle%20interior%20main%20road%20driving%20professional%20emergency%20transport%20monitoring&width=400&height=225&seq=front008&orientation=landscape',
                    left: 'https://readdy.ai/api/search-image?query=ambulance%20left%20side%20view%20exterior%20main%20road%20perspective%20medical%20emergency%20vehicle%20monitoring%20camera%20angle%20professional%20city&width=400&height=225&seq=left008&orientation=landscape',
                    right: 'https://readdy.ai/api/search-image?query=ambulance%20right%20side%20view%20exterior%20main%20road%20perspective%20medical%20emergency%20vehicle%20monitoring%20camera%20professional%20transport%20city&width=400&height=225&seq=right008&orientation=landscape',
                    back: 'https://readdy.ai/api/search-image?query=ambulance%20rear%20view%20back%20camera%20perspective%20medical%20vehicle%20main%20road%20monitoring%20professional%20emergency%20transport%20back%20angle%20city&width=400&height=225&seq=back008&orientation=landscape',
                    interior: 'https://readdy.ai/api/search-image?query=ambulance%20interior%20cabin%20medical%20equipment%20dashboard%20professional%20emergency%20vehicle%20interior%20monitoring%20camera%20perspective%20city&width=400&height=225&seq=interior008&orientation=landscape'
                }
            },
            {
                plateNumber: '皖E555330',
                driver: '徐师傅',
                driverPhoto: 'https://readdy.ai/api/search-image?query=veteran%20ambulance%20driver%20portrait%20wearing%20medical%20uniform%20wise%20expression%20clean%20background%20emergency%20medical%20transport%20operator&width=60&height=60&seq=driver009&orientation=squarish',
                location: '马鞍山市社区医院',
                status: 'online',
                speed: '25 km/h',
                fuel: '88%',
                lastActivity: '2分钟前',
                currentTask: '执行中',
                cameras: {
                    top: 'https://readdy.ai/api/search-image?query=ambulance%20vehicle%20top%20view%20aerial%20perspective%20from%20above%20white%20medical%20emergency%20vehicle%20on%20community%20road%20professional%20monitoring%20camera%20angle&width=400&height=225&seq=top009&orientation=landscape',
                    front: 'https://readdy.ai/api/search-image?query=ambulance%20front%20view%20dashboard%20windshield%20perspective%20medical%20vehicle%20interior%20community%20road%20driving%20professional%20emergency%20transport%20monitoring&width=400&height=225&seq=front009&orientation=landscape',
                    left: 'https://readdy.ai/api/search-image?query=ambulance%20left%20side%20view%20exterior%20community%20perspective%20medical%20emergency%20vehicle%20monitoring%20camera%20angle%20professional%20residential&width=400&height=225&seq=left009&orientation=landscape',
                    right: 'https://readdy.ai/api/search-image?query=ambulance%20right%20side%20view%20exterior%20community%20perspective%20medical%20emergency%20vehicle%20monitoring%20camera%20professional%20transport%20residential&width=400&height=225&seq=right009&orientation=landscape',
                    back: 'https://readdy.ai/api/search-image?query=ambulance%20rear%20view%20back%20camera%20perspective%20medical%20vehicle%20community%20monitoring%20professional%20emergency%20transport%20back%20angle%20residential&width=400&height=225&seq=back009&orientation=landscape',
                    interior: 'https://readdy.ai/api/search-image?query=ambulance%20interior%20cabin%20medical%20equipment%20dashboard%20professional%20emergency%20vehicle%20interior%20monitoring%20camera%20perspective%20community&width=400&height=225&seq=interior009&orientation=landscape'
                }
            }
        ];
        // 报警数据
        const alarmData = [
            {
                id: 1,
                type: '超速报警',
                vehicle: '皖E555322',
                time: '14:25',
                level: 'warning',
                status: '已处理'
            },
            {
                id: 2,
                type: '紧急求助',
                vehicle: '皖E555323',
                time: '14:18',
                level: 'error',
                status: '处理中'
            },
            {
                id: 3,
                type: '偏离路线',
                vehicle: '皖E555324',
                time: '14:12',
                level: 'warning',
                status: '已处理'
            }
        ];
        // 摄像头视角配置
        const cameraViews = [
            { id: 'top', name: '顶部', icon: 'fa-arrow-up', description: 'vehicle top view aerial perspective' },
            { id: 'front', name: '前方', icon: 'fa-arrow-up', description: 'vehicle front view dashboard windshield' },
            { id: 'left', name: '左侧', icon: 'fa-arrow-left', description: 'vehicle left side view exterior road' },
            { id: 'right', name: '右侧', icon: 'fa-arrow-right', description: 'vehicle right side view exterior road' },
            { id: 'back', name: '后方', icon: 'fa-arrow-down', description: 'vehicle rear view back camera perspective' },
            { id: 'interior', name: '内部', icon: 'fa-user', description: 'vehicle interior cabin medical equipment dashboard' }
        ];
        // 应用状态
        let appState = {
            selectedVehicle: '皖E555322',
            layoutMode: '2x2',
            isRecording: false,
            audioEnabled: true,
            videoQuality: 720,
            alarmCount: 3,
            selectedCameraView: {}
        };
        // 初始化摄像头视图 - 九画面时分配不同视角
        function initializeCameraViews() {
            const initialViews = {};
            const cameraViewIds = ['top', 'front', 'left', 'right', 'back', 'interior'];
            vehicleData.forEach((vehicle, index) => {
                initialViews[vehicle.plateNumber] = cameraViewIds[index % cameraViewIds.length];
            });
            appState.selectedCameraView = initialViews;
        }
        // 获取状态颜色
        function getStatusColor(status) {
            switch (status) {
                case 'online':
                    return 'ant-badge-status-success';
                case 'offline':
                    return 'ant-badge-status-error';
                default:
                    return 'ant-badge-status-default';
            }
        }
        // 获取报警颜色
        function getAlarmColor(level) {
            switch (level) {
                case 'error':
                    return 'red';
                case 'warning':
                    return 'orange';
                default:
                    return 'blue';
            }
        }
        // 切换摄像头视图
        function switchCameraView(plateNumber, viewId) {
            appState.selectedCameraView[plateNumber] = viewId;
            // 切换到单画面模式显示选中的摄像头视图
            appState.layoutMode = '1x1';
            appState.selectedVehicle = plateNumber;
            // 更新UI
            updateLayoutMode();
            updateVehicleSelect();
            updateCameraViewSelect();
            renderMonitorGrid();
            updateCameraViewButtons();
        }
        // 获取当前摄像头视图
        function getCurrentCameraView(vehicle) {
            const currentView = appState.selectedCameraView[vehicle.plateNumber] || 'interior';
            return vehicle.cameras[currentView] || vehicle.cameras.interior;
        }
        // 获取当前视图名称
        function getCurrentViewName(plateNumber) {
            const currentView = appState.selectedCameraView[plateNumber] || 'interior';
            const view = cameraViews.find(v => v.id === currentView);
            return view ? view.name : '内部';
        }
        // 渲染监控网格
        function renderMonitorGrid() {
            const gridCols = appState.layoutMode === '1x1' ? 'grid-cols-1' : appState.layoutMode === '2x2' ? 'grid-cols-2' : 'grid-cols-3';
            const displayCount = appState.layoutMode === '1x1' ? 1 : appState.layoutMode === '2x2' ? 4 : 9;
            const monitorGrid = document.getElementById('monitorGrid');
            monitorGrid.className = `grid ${gridCols} gap-4 h-full`;
            monitorGrid.innerHTML = '';
            // 根据选择的车辆和布局模式确定要显示的车辆
            let vehiclesToDisplay = [];
            if (appState.layoutMode === '1x1') {
                // 单画面模式，只显示选中的车辆
                const selectedVehicle = vehicleData.find(v => v.plateNumber === appState.selectedVehicle);
                if (selectedVehicle) {
                    vehiclesToDisplay = [selectedVehicle];
                }
            } else {
                // 多画面模式，显示前N辆车
                vehiclesToDisplay = vehicleData.slice(0, displayCount);
            }
            vehiclesToDisplay.forEach((vehicle, index) => {
                const monitorItem = document.createElement('div');
                monitorItem.className = 'bg-black rounded-lg overflow-hidden relative group';
                // 创建监控画面
                const aspectVideo = document.createElement('div');
                aspectVideo.className = 'aspect-video bg-gray-900 relative';
                // 添加图片
                const img = document.createElement('img');
                img.src = getCurrentCameraView(vehicle);
                img.alt = '监控画面';
                img.className = 'w-full h-full object-cover';
                aspectVideo.appendChild(img);
                // 车辆信息叠加层
                const vehicleInfo = document.createElement('div');
                vehicleInfo.className = 'absolute top-2 left-2 bg-black bg-opacity-70 text-white px-2 py-1 rounded text-xs';
                vehicleInfo.innerHTML = `
                    <div class="flex items-center space-x-2">
                        <span class="ant-badge-status-dot ${getStatusColor(vehicle.status)}"></span>
                        <span class="font-bold">${vehicle.plateNumber}</span>
                    </div>
                `;
                aspectVideo.appendChild(vehicleInfo);
                // 摄像头视图显示
                const cameraViewInfo = document.createElement('div');
                cameraViewInfo.className = 'absolute top-2 right-2 bg-black bg-opacity-70 text-white px-2 py-1 rounded text-xs';
                cameraViewInfo.textContent = getCurrentViewName(vehicle.plateNumber);
                aspectVideo.appendChild(cameraViewInfo);
                // 录制状态指示
                if (appState.isRecording) {
                    const recordingIndicator = document.createElement('div');
                    recordingIndicator.className = 'absolute top-8 right-2 bg-red-600 text-white px-2 py-1 rounded text-xs flex items-center space-x-1';
                    recordingIndicator.innerHTML = `
                        <div class="w-2 h-2 bg-white rounded-full animate-pulse"></div>
                        <span>REC</span>
                    `;
                    aspectVideo.appendChild(recordingIndicator);
                }
                // 驾驶员信息
                const driverInfo = document.createElement('div');
                driverInfo.className = 'absolute bottom-2 left-2 bg-black bg-opacity-70 text-white px-2 py-1 rounded text-xs flex items-center space-x-2';
                driverInfo.innerHTML = `
                    <img src="${vehicle.driverPhoto}" alt="${vehicle.driver}" class="w-6 h-6 rounded-full object-cover">
                    <span>${vehicle.driver}</span>
                `;
                aspectVideo.appendChild(driverInfo);
                // 位置信息
                const locationInfo = document.createElement('div');
                locationInfo.className = 'absolute bottom-2 right-2 bg-black bg-opacity-70 text-white px-2 py-1 rounded text-xs';
                locationInfo.innerHTML = `
                    <div class="flex items-center space-x-1">
                        <i class="fas fa-map-marker-alt text-xs"></i>
                        <span class="truncate max-w-20">${vehicle.location}</span>
                    </div>
                `;
                aspectVideo.appendChild(locationInfo);
                // 摄像头切换控制
                const cameraControls = document.createElement('div');
                cameraControls.className = 'absolute left-2 top-1/2 transform -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-200';
                const cameraButtons = document.createElement('div');
                cameraButtons.className = 'flex flex-col space-y-1';
                cameraViews.forEach(view => {
                    const button = document.createElement('button');
                    button.className = `!rounded-button cursor-pointer bg-black bg-opacity-70 text-white border-white p-2 ${appState.selectedCameraView[vehicle.plateNumber] === view.id ? 'bg-blue-600' : ''}`;
                    button.innerHTML = `<i class="fas ${view.icon}"></i>`;
                    button.title = view.name;
                    button.onclick = () => switchCameraView(vehicle.plateNumber, view.id);
                    cameraButtons.appendChild(button);
                });
                cameraControls.appendChild(cameraButtons);
                aspectVideo.appendChild(cameraControls);
                // 悬停控制按钮
                const hoverControls = document.createElement('div');
                hoverControls.className = 'absolute inset-0 bg-black bg-opacity-30 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center';
                const controlButtons = document.createElement('div');
                controlButtons.className = 'flex space-x-2';
                const playButton = document.createElement('button');
                playButton.className = '!rounded-button cursor-pointer bg-blue-600 text-white p-3 rounded-full';
                playButton.innerHTML = '<i class="fas fa-play"></i>';
                controlButtons.appendChild(playButton);
                const fullscreenButton = document.createElement('button');
                fullscreenButton.className = '!rounded-button cursor-pointer bg-white text-gray-800 p-3 rounded-full';
                fullscreenButton.innerHTML = '<i class="fas fa-expand"></i>';
                controlButtons.appendChild(fullscreenButton);
                const swapButton = document.createElement('button');
                swapButton.className = '!rounded-button cursor-pointer bg-white text-gray-800 p-3 rounded-full';
                swapButton.innerHTML = '<i class="fas fa-exchange-alt"></i>';
                swapButton.title = '切换视图';
                controlButtons.appendChild(swapButton);
                hoverControls.appendChild(controlButtons);
                aspectVideo.appendChild(hoverControls);
                monitorItem.appendChild(aspectVideo);
                monitorGrid.appendChild(monitorItem);
            });
        }
        // 更新车辆状态列表
        function updateVehicleStatusList() {
            const vehicleStatusList = document.getElementById('vehicleStatusList');
            vehicleStatusList.innerHTML = '';
            vehicleData.forEach(vehicle => {
                const statusItem = document.createElement('div');
                statusItem.className = `p-3 rounded border cursor-pointer transition-colors ${
                    appState.selectedVehicle === vehicle.plateNumber ? 'border-blue-500 bg-blue-50' : 'border-gray-200 hover:border-gray-300'
                }`;
                statusItem.onclick = () => selectVehicle(vehicle.plateNumber);
                const taskClass = vehicle.currentTask === '执行中' ? 'bg-green-100 text-green-700' :
                                 vehicle.currentTask === '空闲' ? 'bg-blue-100 text-blue-700' :
                                 'bg-gray-100 text-gray-700';
                statusItem.innerHTML = `
                    <div class="flex items-center justify-between mb-2">
                        <div class="flex items-center space-x-2">
                            <span class="ant-badge-status-dot ${getStatusColor(vehicle.status)}"></span>
                            <span class="font-medium text-sm">${vehicle.plateNumber}</span>
                        </div>
                        <span class="text-xs px-2 py-1 rounded ${taskClass}">
                            ${vehicle.currentTask}
                        </span>
                    </div>
                    <div class="flex items-center space-x-2 mb-1">
                        <img src="${vehicle.driverPhoto}" alt="${vehicle.driver}" class="w-5 h-5 rounded-full object-cover">
                        <span class="text-xs text-gray-600">${vehicle.driver}</span>
                    </div>
                    <div class="text-xs text-gray-500 space-y-1">
                        <div class="flex items-center space-x-1">
                            <i class="fas fa-map-marker-alt text-xs"></i>
                            <span class="truncate">${vehicle.location}</span>
                        </div>
                        <div class="flex justify-between">
                            <span>速度: ${vehicle.speed}</span>
                            <span>油量: ${vehicle.fuel}</span>
                        </div>
                        <div class="flex items-center space-x-1">
                            <i class="fas fa-clock text-xs"></i>
                            <span>${vehicle.lastActivity}</span>
                        </div>
                    </div>
                `;
                vehicleStatusList.appendChild(statusItem);
            });
        }
        // 更新报警列表
        function updateAlarmList() {
            const alarmList = document.getElementById('alarmList');
            alarmList.innerHTML = '';
            alarmData.forEach(alarm => {
                const alarmItem = document.createElement('div');
                alarmItem.className = 'p-2 border rounded border-gray-200';
                const alarmColor = getAlarmColor(alarm.level);
                const statusClass = alarm.status === '已处理' ? 'bg-green-100 text-green-700' : 'bg-orange-100 text-orange-700';
                alarmItem.innerHTML = `
                    <div class="flex items-center justify-between mb-1">
                        <span class="text-xs px-2 py-1 rounded text-white bg-${alarmColor}-500" style="background-color: ${alarmColor};">
                            ${alarm.type}
                        </span>
                        <span class="text-xs text-gray-500">${alarm.time}</span>
                    </div>
                    <div class="text-xs text-gray-600 mb-1">${alarm.vehicle}</div>
                    <div class="text-xs px-2 py-1 rounded ${statusClass}">
                        ${alarm.status}
                    </div>
                `;
                alarmList.appendChild(alarmItem);
            });
        }
        // 选择车辆
        function selectVehicle(plateNumber) {
            appState.selectedVehicle = plateNumber;
            updateVehicleStatusList();
            updateVehicleSelect();
            updateCameraViewSelect();
            updateCameraViewButtons();
            // 如果是单画面模式，更新监控画面
            if (appState.layoutMode === '1x1') {
                renderMonitorGrid();
            }
        }
        // 更新车辆选择器
        function updateVehicleSelect() {
            const vehicleSelect = document.getElementById('vehicleSelect');
            vehicleSelect.innerHTML = `
                <span class="ant-select-selection-item">${appState.selectedVehicle}</span>
                <span class="ant-select-arrow">
                    <i class="fas fa-chevron-down"></i>
                </span>
            `;
            // 更新下拉选项
            const vehicleOptions = document.querySelectorAll('#vehicleDropdown .ant-select-option');
            vehicleOptions.forEach(option => {
                option.classList.remove('ant-select-option-selected');
                if (option.getAttribute('data-value') === appState.selectedVehicle) {
                    option.classList.add('ant-select-option-selected');
                }
            });
        }
        // 更新布局模式选择器
        function updateLayoutMode() {
            const layoutSelect = document.getElementById('layoutSelect');
            layoutSelect.innerHTML = `
                <span class="ant-select-selection-item">${appState.layoutMode === '1x1' ? '单画面' : appState.layoutMode === '2x2' ? '四画面' : '九画面'}</span>
                <span class="ant-select-arrow">
                    <i class="fas fa-chevron-down"></i>
                </span>
            `;
            // 更新下拉选项
            const layoutOptions = document.querySelectorAll('#layoutDropdown .ant-select-option');
            layoutOptions.forEach(option => {
                option.classList.remove('ant-select-option-selected');
                if (option.getAttribute('data-value') === appState.layoutMode) {
                    option.classList.add('ant-select-option-selected');
                }
            });
        }
        // 更新摄像头视图选择器
        function updateCameraViewSelect() {
            const cameraViewSelect = document.getElementById('cameraViewSelect');
            const currentView = appState.selectedCameraView[appState.selectedVehicle] || 'interior';
            const viewName = cameraViews.find(v => v.id === currentView)?.name || '内部';
            cameraViewSelect.innerHTML = `
                <span class="ant-select-selection-item">${viewName}</span>
                <span class="ant-select-arrow">
                    <i class="fas fa-chevron-down"></i>
                </span>
            `;
            // 更新下拉选项
            const cameraViewOptions = document.querySelectorAll('#cameraViewDropdown .ant-select-option');
            cameraViewOptions.forEach(option => {
                option.classList.remove('ant-select-option-selected');
                if (option.getAttribute('data-value') === currentView) {
                    option.classList.add('ant-select-option-selected');
                }
            });
        }
        // 更新摄像头视图按钮
        function updateCameraViewButtons() {
            const cameraViewButtons = document.querySelectorAll('.camera-view-btn');
            const currentView = appState.selectedCameraView[appState.selectedVehicle] || 'interior';
            cameraViewButtons.forEach(button => {
                const viewId = button.getAttribute('data-view');
                if (viewId === currentView) {
                    button.className = 'camera-view-btn !rounded-button cursor-pointer flex flex-col items-center justify-center h-12 text-xs whitespace-nowrap bg-blue-600 text-white py-1 px-2 rounded hover:bg-blue-700';
                } else {
                    button.className = 'camera-view-btn !rounded-button cursor-pointer flex flex-col items-center justify-center h-12 text-xs whitespace-nowrap bg-white border border-gray-300 text-gray-700 py-1 px-2 rounded hover:bg-gray-50';
                }
            });
        }
        // 更新视频质量滑块
        function updateVideoQualitySlider() {
            const qualityValue = document.getElementById('qualityValue');
            const qualityTrack = document.getElementById('qualityTrack');
            const qualityHandle = document.getElementById('qualityHandle');
            qualityValue.textContent = `${appState.videoQuality}p`;
            // 计算滑块位置
            const percentage = ((appState.videoQuality - 480) / (1080 - 480)) * 100;
            qualityTrack.style.width = `${percentage}%`;
            qualityHandle.style.left = `${percentage}%`;
        }
        // 更新在线/离线车辆计数
        function updateVehicleCounts() {
            const onlineCount = vehicleData.filter(v => v.status === 'online').length;
            const offlineCount = vehicleData.filter(v => v.status === 'offline').length;
            document.getElementById('onlineCount').textContent = onlineCount;
            document.getElementById('offlineCount').textContent = offlineCount;
        }
        // 更新最后更新时间
        function updateLastUpdateTime() {
            const now = new Date();
            const timeString = now.toLocaleTimeString();
            document.getElementById('lastUpdate').textContent = timeString;
        }
        // 初始化事件监听器
        function initEventListeners() {
            // 车辆选择下拉框
            const vehicleSelect = document.getElementById('vehicleSelect');
            const vehicleDropdown = document.getElementById('vehicleDropdown');
            vehicleSelect.addEventListener('click', () => {
                vehicleDropdown.classList.toggle('show');
            });
            document.querySelectorAll('#vehicleDropdown .ant-select-option').forEach(option => {
                option.addEventListener('click', () => {
                    const value = option.getAttribute('data-value');
                    if (value !== 'all') {
                        appState.selectedVehicle = value;
                        updateVehicleSelect();
                        updateCameraViewSelect();
                        updateCameraViewButtons();
                        updateVehicleStatusList();
                        // 如果是单画面模式，更新监控画面
                        if (appState.layoutMode === '1x1') {
                            renderMonitorGrid();
                        }
                    }
                    vehicleDropdown.classList.remove('show');
                });
            });
            // 布局模式选择下拉框
            const layoutSelect = document.getElementById('layoutSelect');
            const layoutDropdown = document.getElementById('layoutDropdown');
            layoutSelect.addEventListener('click', () => {
                layoutDropdown.classList.toggle('show');
            });
            document.querySelectorAll('#layoutDropdown .ant-select-option').forEach(option => {
                option.addEventListener('click', () => {
                    appState.layoutMode = option.getAttribute('data-value');
                    updateLayoutMode();
                    renderMonitorGrid();
                    layoutDropdown.classList.remove('show');
                });
            });
            // 摄像头视图选择下拉框
            const cameraViewSelect = document.getElementById('cameraViewSelect');
            const cameraViewDropdown = document.getElementById('cameraViewDropdown');
            cameraViewSelect.addEventListener('click', () => {
                cameraViewDropdown.classList.toggle('show');
            });
            document.querySelectorAll('#cameraViewDropdown .ant-select-option').forEach(option => {
                option.addEventListener('click', () => {
                    const viewId = option.getAttribute('data-value');
                    appState.selectedCameraView[appState.selectedVehicle] = viewId;
                    updateCameraViewSelect();
                    updateCameraViewButtons();
                    // 如果是单画面模式，更新监控画面
                    if (appState.layoutMode === '1x1') {
                        renderMonitorGrid();
                    }
                    cameraViewDropdown.classList.remove('show');
                });
            });
            // 摄像头视图按钮
            document.querySelectorAll('.camera-view-btn').forEach(button => {
                button.addEventListener('click', () => {
                    const viewId = button.getAttribute('data-view');
                    switchCameraView(appState.selectedVehicle, viewId);
                });
            });
            // 录制开关
            const recordingSwitch = document.getElementById('recordingSwitch');
            recordingSwitch.addEventListener('click', () => {
                appState.isRecording = !appState.isRecording;
                if (appState.isRecording) {
                    recordingSwitch.classList.add('ant-switch-checked');
                } else {
                    recordingSwitch.classList.remove('ant-switch-checked');
                }
                renderMonitorGrid();
            });
            // 音频开关
            const audioSwitch = document.getElementById('audioSwitch');
            audioSwitch.addEventListener('click', () => {
                appState.audioEnabled = !appState.audioEnabled;
                if (appState.audioEnabled) {
                    audioSwitch.classList.add('ant-switch-checked');
                } else {
                    audioSwitch.classList.remove('ant-switch-checked');
                }
            });
            // 视频质量滑块
            const qualityHandle = document.getElementById('qualityHandle');
            let isDragging = false;
            qualityHandle.addEventListener('mousedown', () => {
                isDragging = true;
            });
            document.addEventListener('mousemove', (e) => {
                if (!isDragging) return;
                const slider = document.querySelector('.ant-slider');
                const rect = slider.getBoundingClientRect();
                const percentage = Math.max(0, Math.min(100, ((e.clientX - rect.left) / rect.width) * 100));
                // 计算对应的质量值
                const quality = Math.round(480 + (percentage / 100) * (1080 - 480));
                // 确保是480、720或1080中的一个
                let finalQuality = 480;
                if (quality > 480 && quality <= 720) {
                    finalQuality = 720;
                } else if (quality > 720) {
                    finalQuality = 1080;
                }
                appState.videoQuality = finalQuality;
                updateVideoQualitySlider();
            });
            document.addEventListener('mouseup', () => {
                isDragging = false;
            });
            // 点击其他地方关闭下拉框
            document.addEventListener('click', (e) => {
                if (!vehicleSelect.contains(e.target) && !vehicleDropdown.contains(e.target)) {
                    vehicleDropdown.classList.remove('show');
                }
                if (!layoutSelect.contains(e.target) && !layoutDropdown.contains(e.target)) {
                    layoutDropdown.classList.remove('show');
                }
                if (!cameraViewSelect.contains(e.target) && !cameraViewDropdown.contains(e.target)) {
                    cameraViewDropdown.classList.remove('show');
                }
            });
            // 定时更新时间
            setInterval(updateLastUpdateTime, 1000);
        }
        // 初始化应用
        function initApp() {
            initializeCameraViews();
            renderMonitorGrid();
            updateVehicleStatusList();
            updateAlarmList();
            updateVehicleSelect();
            updateLayoutMode();
            updateCameraViewSelect();
            updateCameraViewButtons();
            updateVideoQualitySlider();
            updateVehicleCounts();
            updateLastUpdateTime();
            initEventListeners();
            // 显示报警区域
            if (appState.alarmCount > 0) {
                document.getElementById('alarmSection').style.display = 'block';
            }
        }
        // 页面加载完成后初始化应用
        document.addEventListener('DOMContentLoaded', initApp);
    </script>
</body>
</html>